<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>实战前必须掌握的10个指令(上)</title>
    <script src="../js/lib/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--v-text 指令用于更新标签包含的文本，它的作用跟双大括号的效果一样。-->
    <p v-text="msg"></p>
    <!--v-show 指令的取值为true/false，分别对应着显示/隐藏。-->
    <p v-show="show1">我是true</p>
    <p v-show="show2">我是false</p>
    <!--v-if 指令的取值也是为true或false，它控制元素是否需要被渲染出来-->
    <p v-if="if1">我是true</p>
    <p v-if="if2">我是false</p>
    <p v-else>我是else</p>

</div>
<script>
    // 创建vm实例
    let vm = new Vue({
        //2、挂载元素
        el:"#app",
        //3、实例vm的数据
        data:{
            msg:"hello vue",
            show1:true,
            show2:false,
            if1:true,
            if2:false,
        },
    });
</script>
</body>
</html>